<template>

    <div class="categoryArea ui-c-f">
        <div class="mainlist">
            <ul class="slider">
                <li v-for="val of list||[]"
                    @click="touchCate(val._id)" :class="{'select': val._id == (touched|| selected_cate_id)}">
                    {{val.name}}
                </li>
            </ul>
        </div>
        <div class="sublist">
            <ul class="slider">
                <li @click="selectCategory()">全部</li>
                <li v-for="val of subList||[]" @click="selectCategory(val)">
                    {{val.name}}
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    import IScroll from 'iscroll';
    import http from '../libs/http'

    export default{
        props: ['selected_cate_id'],

        data(){
            return {
                map: {},
                list: [],
                touched: ''
            }
        },

        computed: {
            subList: function () {
                var id;
                if (this.touched)
                    id = this.touched;
                else if (this.list && this.list.length > 0)
                    id = this.list[0]._id;

                if (this.map[id])
                    return this.map[id].children;
                return [];
            }
        },

        attached: function () {
            this.touched = this.selected_cate_id;
        },

        ready: function () {

            var self = this;

            http.get({
                        url: api + 'commodity/list/category',
                        jsonp: true,
                    })
                    .then(function (obj) {
                        if (obj.code == 0) {

                            var data = obj.data || [];

                            var tmp = {};
                            data.forEach(function (v) {
                                tmp[v._id] = v;
                            });

                            self.map = tmp;
                            self.list = data;
                        } else {
                            //   alert(obj.msg);
                        }
                    })
        },
        methods: {
            touchCate: function (_id) {
                this.touched = _id;
            },

            selectCategory: function (subCate) {

                var selectedCate = this.map[this.touched];

                selectedCate.subCate = subCate;
                this.$dispatch('change-cate', selectedCate);
            }
        }
    }
</script>

<style scoped>
    .categoryArea {
        border-bottom: solid 1px #dddddd;
        overflow: hidden;
        z-index: 15;
        top: 37px;
        left: 0;
        position: fixed;
        width: 100%;
        background: #f0f0f0;
        /*height: 200px;*/
        transition: height 0.3s;
        -webkit-transition: height 0.3s;
    }

    .categoryArea .mainlist {
        float: left;
        width: 50%;
        /*height: 200px;*/
    }

    .categoryArea li {
        list-style: none;
        line-height: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 12px;
        color: #888888;
    }

    .categoryArea .mainlist li.select {
        background: white;
        color: #111111;
    }

    .categoryArea .sublist {
        float: left;
        width: 50%;
        /*height: 200px;*/
        background: white;
    }

</style>